<template>
  <div class="proStirage">
    <div class="header">
      <div class="header-name">
        <el-form :model="proview" size="mini" label-width="100px">
          <el-form-item :label="$t('market.fdate')">
            <el-date-picker
              v-model="proview.date"
              type="daterange"
              align="right"
              unlink-panels
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item :label="$t('market.prodept')">
            <el-input v-model.trim="proview.detName" />
          </el-form-item>
          <el-form-item :label="$t('market.rkdh')">
            <el-input v-model.trim="proview.fbillno" />
          </el-form-item>
          <el-form-item :label="$t('market.paezText1')">
            <el-input v-model.trim="proview.sal_khddh" />
          </el-form-item>
          <el-form-item :label="$t('market.fmaterial')">
            <el-input v-model.trim="proview.fnumber" />
          </el-form-item>
          <el-form-item label-width="30px">
            <el-button type="primary" size="mini" @click="handleQuerySonClass">
              {{ $t('btn.search') }}
            </el-button>
            <el-button type="primary" size="mini" @click="handleExport">{{ $t('btn.toExcel') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="table-content">
      <jc-table
        :table-data="tableData"
        :table-header="tableHeader"
        :table-height="tableHeight"
        sortable
      >
        <el-table-column label="匹配" prop="匹配" align="center" />
        <el-table-column label="生产订单" prop="生产订单" align="center" />
        <el-table-column label="生产订单行号" prop="生产订单行号" align="center" />
        <el-table-column label="备注" prop="备注" align="center" />
        <el-table-column label="客户订单号" prop="客户订单号" align="center" />
        <el-table-column label="产品助记码" prop="产品助记码" align="center" />
        <el-table-column label="产品编码" prop="产品编码" align="center" />
        <el-table-column label="产品名称" prop="产品名称" align="center" />
        <el-table-column label="规格型号" prop="规格型号" align="center" />
        <el-table-column label="订单数量" prop="订单数量" align="center" />
        <el-table-column label="期初入库数量" prop="期初入库数量" align="center" />
        <el-table-column label="本期入库数量" prop="本期入库数量" align="center" />
        <el-table-column label="已生产数量" prop="已生产数量" align="center" />
        <el-table-column label="当月计件数量" prop="当月计件数量" align="center" />
        <el-table-column label="已生产与计件差异" prop="已生产与计件差异" align="center" />
        <el-table-column label="标准" align="center">
          <el-table-column label="标准分子" prop="标准分子" align="center" />
          <el-table-column label="标准分母" prop="标准分母" align="center" />
          <el-table-column label="计划子项物料编码" prop="计划子项物料编码" align="center" />
          <el-table-column label="标准物料描述" prop="标准物料描述" align="center" />
          <el-table-column label="物料类型" prop="物料类型" align="center" />
          <el-table-column label="标准材料单价" prop="标准材料单价" align="center" />
          <el-table-column label="标准材料含税单价" prop="标准材料含税单价" align="center" />
          <el-table-column label="材料含税金额(单个)" prop="材料含税金额（单个）（单价*分子/分母）" align="center" />
          <el-table-column label="材料不含税金额（单个）" prop="材料不含税金额（单个）（单价*分子/分母）" align="center" />
          <el-table-column label="标准材料含税总价（计件）" prop="标准材料含税总价（计件）" align="center" />
          <el-table-column label="标准材料不含税总价（计件）" prop="标准材料不含税总价（计件）" align="center" />
          <el-table-column label="分类2" prop="分类2" align="center" />
          <el-table-column label="委外-烤漆/电镀含税单价" prop="委外-烤漆/电镀含税单价" align="center" />
          <el-table-column label="委外-打磨/抛光/拉丝含税单价" prop="委外-打磨/抛光/拉丝含税单价" align="center" />
          <el-table-column label="委外含税金额（单个）" prop="委外含税金额（单个）" align="center" />
          <el-table-column label="委外不含税金额（单个）" prop="委外不含税金额（单个）" align="center" />
          <el-table-column label="标准委外含税总价（计件）" prop="标准委外含税总价（计件）" align="center" />
          <el-table-column label="标准委外不含税总价（计件）" prop="标准委外不含税总价（计件）" align="center" />
        </el-table-column>
        <el-table-column label="实际" align="center">
          <el-table-column label="实际子项物料编码" prop="实际子项物料编码" align="center" />
          <el-table-column label="子项物料名称" prop="子项物料名称" align="center" />
          <el-table-column label="子项规格型号" prop="子项规格型号" align="center" />
          <el-table-column label="物料属性" prop="物料属性" align="center" />
          <el-table-column label="实际不含税单价" prop="实际不含税单价" align="center" />
          <el-table-column label="实际含税单价" prop="实际含税单价" align="center" />
          <el-table-column label="用量类型" prop="用量类型" align="center" />
          <el-table-column label="分子" prop="分子" align="center" />
          <el-table-column label="分母" prop="分母" align="center" />
          <el-table-column label="分子与标准差异" prop="分子与标准差异" align="center" />
          <el-table-column label="子项单位" prop="子项单位" align="center" />
          <el-table-column label="发料方式" prop="发料方式" align="center" />
          <el-table-column label="是否关键件" prop="是否关键件" align="center" />
          <el-table-column label="期初领料" prop="期初领料" align="center" />
          <el-table-column label="本期领料数量" prop="本期领料数量" align="center" />
          <el-table-column label="期初+本期领料数" prop="期初+本期领料数" align="center" />
          <el-table-column label="应领料量" prop="应领料量" align="center" />
          <el-table-column label="差异数量" prop="差异数量" align="center" />
          <el-table-column label="领料合计与应领倍数差异" prop="领料合计与应领倍数差异" align="center" />
          <el-table-column label="本月计件领料数量" prop="本月计件领料数量" align="center" />
          <el-table-column label="材料领料含税总价（计件）" prop="材料领料含税总价（计件）" align="center" />
          <el-table-column label="材料领料不含税总价（计件）" prop="材料领料不含税总价（计件）" align="center" />
          <el-table-column label="委外含税总价（计件）" prop="委外含税总价（计件）" align="center" />
          <el-table-column label="委外不含税总价（计件）" prop="委外不含税总价（计件）" align="center" />
        </el-table-column>
        <el-table-column label="超领/少领备注" prop="超领/少领备注" align="center" />
        <el-table-column label="材料超领含税总价（计件）" prop="材料超领含税总价（计件）" align="center" />
        <el-table-column label="材料超领不含税总价（计件）" prop="材料超领不含税总价（计件）" align="center" />
        <el-table-column label="委外超领含税总价（计件）" prop="委外超领含税总价（计件）" align="center" />
        <el-table-column label="委外超领不含税总价（计件）" prop="委外超领不含税总价（计件）" align="center" />
      </jc-table>
    </div>
    <!--    分页器-->
    <div class="footer">
      <jc-pagination
        :total="total"
        :page.sync="currentPage"
        :limit.sync="size"
        @pagination="handleGetUntreated"
      />
    </div>
  </div>
</template>

<script>
import {
  queryJXOderReporting, queryJXOderAvgReporting
} from '@/api/production/productionList'
// import searData from '@/components/Search/mixin'
import picker from '@/components/Search/picker'
import { export_json_to_excel, formatJson } from '@/utils/Export2Excel'

export default {
  name: 'ProSupplement',
  mixins: [picker],
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      }
    },
    url: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      proview: {
        date: [],
        detName: '',
        fbillno: '',
        sal_khddh: '',
        fnumber: ''
      },
      total: 0, // 总条目
      currentPage: 1, // 当前页
      size: 200, // 每页显示多少条数据
      proData: [],
      tableHeight: '70vh',
      fbiVal: '',
      // 表头
      tableData: [], // 生产领料数据
      tableHeader: [],
      tableHeader1: []
    }
  },
  created() {
    // this.handleGetUntreated()
    this.tableHeader1 = this.tableHeader
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 200px)' : '73vh'
  },
  methods: {
    // 获取生产入库列表数据
    async handleGetUntreated() {
      const { detName, fbillno, sal_khddh, fnumber } = this.proview
      const DATA = {
        list: this.list,
        sd: this.proview.date[0],
        ed: this.proview.date[1],
        detName, fbillno, sal_khddh, fnumber,
        pageNum: this.currentPage,
        pageSize: this.size
      }
      const URL = this.url === '1' ? queryJXOderAvgReporting : queryJXOderReporting
      await URL(DATA).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.detail
          this.total = res.data.total
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 搜索
    handleQuerySonClass() {
      this.currentPage = 1
      this.handleGetUntreated()
    },
    // 导出表格
    handleExport() {
      require.ensure([], () => {
        // 多级表头
        const tHeader = ['匹配', '生产订单', '生产订单行号', '备注', '客户订单号', '产品助记码', '产品编码', '产品名称',
          '规格型号', '订单数量', '期初入库数量', '本期入库数量', '已生产数量', '当月计件数量', '已生产与计件差异', '标准分子', '标准分母', '计划子项物料编码', '标准物料描述',
          '物料类型', '标准材料单价', '标准材料含税单价', '材料含税金额（单个）（单价*分子/分母）', '材料不含税金额（单个）（单价*分子/分母）',
          '标准材料含税总价（计件）', '标准材料不含税总价（计件）', '分类2', '委外-烤漆/电镀含税单价', '委外-打磨/抛光/拉丝含税单价',
          '委外含税金额（单个）', '委外不含税金额（单个）', '标准委外含税总价（计件）', '标准委外不含税总价（计件）', '实际子项物料编码',
          '子项物料名称', '子项规格型号', '物料属性', '实际不含税单价', '实际含税单价', '用量类型', '分子', '分母', '分子与标准差异', '子项单位', '发料方式',
          '是否关键件', '期初领料', '本期领料数量', '期初+本期领料数', '应领料量', '差异数量', '领料合计与应领倍数差异',
          '本月计件领料数量', '材料领料含税总价（计件）', '材料领料不含税总价（计件）', '委外含税总价（计件）', '委外不含税总价（计件）',
          '超领/少领备注', '材料超领含税总价（计件）', '材料超领不含税总价（计件）', '委外超领含税总价（计件）', '委外超领不含税总价（计件）'
        ]
        const filterVal = ['匹配', '生产订单', '生产订单行号', '备注', '客户订单号', '产品助记码', '产品编码', '产品名称',
          '规格型号', '订单数量', '期初入库数量', '本期入库数量', '已生产数量', '当月计件数量', '已生产与计件差异', '标准分子', '标准分母', '计划子项物料编码', '标准物料描述',
          '物料类型', '标准材料单价', '标准材料含税单价', '材料含税金额（单个）（单价*分子/分母）', '材料不含税金额（单个）（单价*分子/分母）',
          '标准材料含税总价（计件）', '标准材料不含税总价（计件）', '分类2', '委外-烤漆/电镀含税单价', '委外-打磨/抛光/拉丝含税单价',
          '委外含税金额（单个）', '委外不含税金额（单个）', '标准委外含税总价（计件）', '标准委外不含税总价（计件）', '实际子项物料编码',
          '子项物料名称', '子项规格型号', '物料属性', '实际不含税单价', '实际含税单价', '用量类型', '分子', '分母', '分子与标准差异', '子项单位', '发料方式',
          '是否关键件', '期初领料', '本期领料数量', '期初+本期领料数', '应领料量', '差异数量', '领料合计与应领倍数差异',
          '本月计件领料数量', '材料领料含税总价（计件）', '材料领料不含税总价（计件）', '委外含税总价（计件）', '委外不含税总价（计件）',
          '超领/少领备注', '材料超领含税总价（计件）', '材料超领不含税总价（计件）', '委外超领含税总价（计件）', '委外超领不含税总价（计件）'
        ]

        const { detName, fbillno, sal_khddh, fnumber } = this.proview
        const URL = this.url === '1' ? queryJXOderAvgReporting : queryJXOderReporting
        URL({
          list: this.list,
          sd: this.proview.date[0],
          ed: this.proview.date[1],
          detName, fbillno, sal_khddh, fnumber,
          pageSize: 100000,
          pageNum: 1
        }).then(res => {
          if (res.code === 0) {
            const list = res.data.detail
            const data = formatJson(filterVal, list)
            export_json_to_excel(tHeader, data, '产品领料明细表')
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.proStirage {
  @include listBom;
  padding: 0;
  .marL {
    margin-left: 10px;
  }
  .el-form {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
